<template>
  <div class="mainHeader" :class="{ activeHeader: isCollapse }">
    <div>
      <span>归档申请列表</span>
      <span>
        <ReturnFirstPage />
        <span>归档申请列表</span>
        <span>/</span>
      </span>
    </div>
  </div>
</template>

<script>
import ReturnFirstPage from '@/components/Function/ReturnFirstPage.vue';

export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  components: {
    ReturnFirstPage,
  },
  mounted() {
    // 主体头部伸缩
    this.$bus.$on('changeMainHeader', () => {
      this.isCollapse = !this.isCollapse;
    });
  },
  beforeDestroy() {
    this.$bus.$off('changeMainHeader');
  },
};
</script>

<style lang="less">
.activeHeader {
  width: calc(100vw - 100px) !important;
  transition: all 0.5s;
}

.mainHeader {
  position: fixed;
  width: calc(100vw - 260px);
  padding: 0 20px;
  height: 46px;
  line-height: 46px;
  background-color: #fff;
  transition: all 0.5s;
  border-top: 1px solid #e6e6e6;
  z-index: 999;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);

  span:nth-child(1) {
    font-size: 16px;

    &::before {
      content: '';
      float: left;
      height: 20px;
      width: 5px;
      margin: 13px 8px 0 0;
      background-color: #009688;
    }
  }

  span:nth-child(2) {
    float: right;
    font-size: 14px;

    a,
    span:nth-child(3) {
      color: #999999;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      color: #5fb878;
    }

    span:nth-child(2) {
      color: #666666;
    }

    span:nth-child(3) {
      font-size: 12px;
      margin: 0 8px;
    }
  }
}
</style>
